<%@page pageEncoding="UTF-8" contentType="text/html; UTF-8" isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>系统登录 - 超市账单管理系统</title>
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script type="text/javascript">
		// 修改后的检查登录错误函数
		function checkLoginError() {
			const urlParams = new URLSearchParams(window.location.search);
			const errorMsg = urlParams.get('msg');

			if (errorMsg) {
				showAlert(decodeURIComponent(errorMsg));
				// 清除URL参数避免重复弹出
				window.history.replaceState({}, document.title, window.location.pathname);
			}
		}

		// 保持原有的showAlert函数不变
		function showAlert(message) {
			const overlay = document.createElement('div');
			overlay.style.cssText = `
				position: fixed; top: 0; left: 0; width: 100%; height: 100%;
				background-color: rgba(0,0,0,0.5); display: flex; justify-content: center;
				align-items: center; z-index: 1000; backdrop-filter: blur(2px);
			`;

			const alertBox = document.createElement('div');
			alertBox.style.cssText = `
				background-color: white; padding: 20px; border-radius: 8px;
				box-shadow: 0 4px 20px rgba(0,0,0,0.15); width: 300px; max-width: 90%;
				text-align: center; animation: fadeIn 0.3s ease;
			`;

			const style = document.createElement('style');
			style.textContent = `@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }`;
			document.head.appendChild(style);

			const messageElement = document.createElement('p');
			messageElement.textContent = message;
			messageElement.style.cssText = `margin: 0 0 15px 0; color: #333; font-size: 16px;`;

			const confirmButton = document.createElement('button');
			confirmButton.textContent = '确定';
			confirmButton.style.cssText = `
				background-color: #4a86e8; color: white; border: none;
				padding: 8px 20px; border-radius: 4px; cursor: pointer;
				font-size: 14px; transition: background-color 0.2s;
			`;

			confirmButton.onclick = () => document.body.removeChild(overlay);
			alertBox.appendChild(messageElement);
			alertBox.appendChild(confirmButton);
			overlay.appendChild(alertBox);
			document.body.appendChild(overlay);
		}

		// 修改后的validate函数
		function validate() {
			const username = document.getElementsByName('username')[0].value.trim();
			const password = document.getElementsByName('password')[0].value.trim();

			if (username === '') {
				document.getElementById('loginNameSpan').textContent = '请输入用户名';
				document.getElementById('loginNameSpan').style.color = 'red';
				return false;
			}

			if (password === '') {
				document.getElementById('passwordSpan').textContent = '请输入密码';
				document.getElementById('passwordSpan').style.color = 'red';
				return false;
			}

			// 添加from=login标识
			const form = document.getElementById('actionForm');
			form.action = form.action.split('?')[0] + '?from=login';
			form.submit();
			return true;
		}

		// 回车键登录功能
		function initEnterKeyLogin() {
			document.addEventListener('keydown', function(event) {
				if (event.keyCode === 13) {
					event.preventDefault();
					validate();
				}
			});
		}

		// 页面加载时初始化
		window.onload = function() {
			checkLoginError();
			initEnterKeyLogin();
		};
	</script>
</head>
<body class="blue-style">
<div id="login">
	<div class="icon"></div>
	<div class="login-box">
		<form action="${pageContext.request.contextPath}/user/login" name="actionForm" id="actionForm" method="post">
			<dl>
				<dt>用户名：</dt>
				<dd><input type="text" class="input-text" name="username"/> <span id="loginNameSpan"></span></dd>
				<dt>密　码：</dt>
				<dd><input type="password" class="input-text" name="password"/><span id="passwordSpan"></span></dd>
			</dl>
			<div class="buttons">
				<input type="button" value="登录系统" class="input-button" onclick="validate()" />
				<input type="reset" value="重　填" class="input-button" />
			</div>
		</form>
	</div>
</div>
</body>
</html>